<template>
	<div class="mobile-simulator">
		<div class="iphone-simulator">
			<div class="screen">
				
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface IProps {
	dragging: boolean
}

const props = defineProps<IProps>()
</script>

<style lang="less" scoped>
.mobile-simulator {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px;
	.iphone-simulator {
		width: calc((100vh - 88px) * 0.462);
		height: calc(100vh - 88px);
		max-width: 375px;
		max-height: 812px;
		border-radius: 36px;
		border: 16px solid black;
		background-color: #ffffff;
		position: relative;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	}
	.screen {
		width: 100%;
		height: 100%;
		border-radius: 36px;
		overflow: auto;
    padding: 8px;
	}
}
</style>
